<template>
    <div style="height:100%;width:100%;">
        <bar class="bar" @on-back="$router.back()" title="批量充值"> </bar>
        <scroller class="_v-container_e" height="93%">
            <group>
                <cellBox class="user-list">
                    <span>用户名</span>
                    <ul style="display: inline;">
                        <li class="user-box" v-for="(item, key) in items" :key="item">{{item.name}} <i class="ion ion-android-close" @click="handle(key)"></i></li>
                    </ul>
                </cellBox>
                <x-input type="number" v-model="amount" title="充值金额"></x-input>
            </group>
            <div style="display:flex;margin-top: 1.17647059em">
                <x-button style="margin:0 20px;flex:1" @click.native="handleNext">下一步</x-button>
            </div>
        </scroller>
        <mu-mask v-model="show" :is-click-hide="true">
            <div class="layout">
                <div class="layout-title">请输入支付密码</div>
                <div class="layout-label">充值</div>
                <div class="layout-amount">￥{{amount}}</div>
                <div style="position: relative;width: calc(100% - 42px);margin:0 auto">
                    <div class="layout-input" @click="inShow= true">{{value}}</div>
                    <!-- <input type="password" ref="inp" class="layout-input" v-model="password" maxlength="6" @input="handleInput" @focus="nokey"> -->
                    <div class="layout-repeat" style="left: 36.6px"></div>
                    <div class="layout-repeat" style="left: 73.2px"></div>
                    <div class="layout-repeat" style="left: 109.8px"></div>
                    <div class="layout-repeat" style="left: 146.4px"></div>
                    <div class="layout-repeat" style="left: 183px"></div>
                </div>
            </div>
            <input-control :show.sync="inShow" @on-hide="show= false" v-model="password"></input-control>
        </mu-mask>
        <msg description="恭喜你,充值成功" icon="success" v-show="!scrollShow"></msg>
        <confirm v-model="comShow" class="confirm-box" cancelText="忘记密码" confirmText="重试" @on-cancel="$router.push('passForget')" @on-confirm="confirm">
            <h4 class="confirm-title">输入密码错误</h4>
        </confirm>
    </div>
</template>

<script>
    import md5 from 'js-md5'
    import {
        lang
    } from 'muka'
    import {
        Bar,
        Mask,
        InputControl
    } from 'muka-ui'
    import {
        Group,
        Cell,
        CellBox,
        XInput,
        XButton,
        Confirm,
        Msg
    } from 'vux'
    export default {
        name: 'detailOnly',
        components: {
            Bar,
            Group,
            Cell,
            CellBox,
            XInput,
            XButton,
            'mu-mask': Mask,
            Confirm,
            InputControl,
            Msg
        },
        data: function () {
            return {
                scrollShow: true,
                comShow: false,
                amount: '',
                show: false,
                value: '',
                password: '',
                items: [],
                inShow: true
            }
        },
        watch: {
            password: function (newVal) {
                let l = newVal.length
                let v = ''
                for (let i = 0; i < l; i++) {
                    v += '·'
                }
                this.value = v
                if (newVal.length === 6) {
                    this.handleInput()
                }
            }
        },
        created: function () {
            if (lang.isEmptyObject(this.$route.params)) {
                this.$router.back()
                return
            }
            this.amount = ''
            this.items = this.$route.params.items.map((item) => {
                return {
                    name: item.userName,
                    cardId: item.cardId
                }
            })
        },
        methods: {
            handle: function (index) {
                this.items.splice(index, 1)
            },
            handleInput: async function () {
                if (this.password.length === 6) {
                    try {
                        this.show = false
                        let cards = this.items.map((item => item.cardId))
                        this.$ajax(
                            'card/batchRecharge',
                            {
                                amount: Number(this.amount).toFixed(2),
                                cards: cards,
                                payPassword: md5(this.password)
                            },
                            (content) => {
                                this.scrollShow = false
                                this.$router.back()
                            }, true, true)
                    } catch (err) {
                        console.log(err)
                    }
                }
            },
            handleNext: function () {
                if (this.amount) {
                    this.show = !this.show
                } else {
                    this.$vux.toast.show({
                        text: '请输入充值金额',
                        type: 'text',
                        position: 'middle'
                    })
                }
            },
            confirm: function () {
                this.password = ''
                this.handleNext()
            }
        }
    }

</script>
<style lang="less">
    .myInfo-confirm {
        .weui-dialog__btn_default {
            display: none;
        }
    }

    .layout {
        background: white;
        position: absolute;
        top: ~'calc(30% - 72px)';
        text-align: center;
        border-radius: 3px;
        padding: 15px 0;
        width: 260px;
        left: ~'calc(50% - 130px)';
        line-height: 30px;
        .layout-title {
            font-size: 16px;
            border-bottom: 1px solid #b9b9b9;
        }
        .layout-label {
            font-size: 14px;
        }
        .layout-amount {
            font-size: 18px;
        }
        .layout-input {
            border: 1px solid #b9b9b9;
            margin: 0;
            padding: 0;
            letter-spacing: 24px;
            text-indent: 12px;
            outline: none;
            font-weight: 800;
            line-height: 35px;
            width: 100%;
            height: 35px;
            font-size: 40px;
            text-align: left;
        }
        .layout-repeat {
            position: absolute;
            display: inline-block;
            height: 35px;
            top: 1px;
            border-right: 1px solid #b9b9b9;
        }
    }

    .user-box {
        background: #44b549;
        color: white;
        border-radius: 10px;
        padding: 2px 5px;
        margin-right: 10px;
        display: inline-block;
        line-height: 20px;
    }

    .user-list {
        height: auto !important;
        min-height: 25px;
        line-height: 35px
    }

    .ic-recharge {}

</style>
